import 'package:flutter/material.dart';

class UnderlineRadioGroup extends StatefulWidget {
  UnderlineRadioGroup({
    @required this.titles,
    @required this.selects,
    @required this.onTap,
  });

  final List<String> titles;
  List<bool> selects;
  final Function(int index) onTap;

  @override
  State<StatefulWidget> createState() {
    return _UnderlineRadioGroupState();
  }
}

class _UnderlineRadioGroupState extends State<UnderlineRadioGroup> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: widget.titles.length,
      itemBuilder: (context, index) {
        return _buildItem(index, onTap: widget.onTap);
      },
    );
  }

  Widget _buildItem(int index, {Function(int index) onTap}) {
    return GestureDetector(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            children: <Widget>[
              Text(
                widget.titles[index],
                style: TextStyle(
                  fontSize: 17,
                  color: (widget.selects[index] ? Colors.blue : Colors.black38),
                ),
              ),
              Icon(
                Icons.navigate_next,
              ),
            ],
          ),
          Container(
            color: widget.selects[index] ? Colors.blue : Colors.transparent,
            width: widget.titles[index].length * 17.0,
            height: 1.5,
          ),
        ],
      ),
      onTap: (){
        onTap(index);
      },
    );
  }
}
